<template>
  <div class="nav-bar-box" :style="{height: (statusH + titleH) + 'px' }">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px', background: bg}"></div>
      <div class="nav-head flex-row-v-center" :style="{height:titleH + 'px', background: bg}">
        <div class="back-box flex-row-center" v-if="back" @click="$emit('goBack')">
          <img v-if="!titleColor" src="/static/assets/img/icon/icon-arrow-left.png" />
          <img v-else src="/static/assets/img/icon/icon-arrow-left-white.png" />
        </div>
        <div class="title-txt flex-1" :style="{color: titleColor}">{{title}}</div>
        <div v-if="!back">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from 'global'

  export default {
    props: {
      back: {
        type: Boolean,
        default: false
      },
      bg: {
        type: String,
        default: '#ffffff'
      },
      title: {
        type: String,
        default: ''
      },
      titleColor: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        navBarHeight: global.state.statusH + global.state.titleH
      }
    }
  }
</script>

<style lang="scss" scoped>
  .nav-bar-box {
    position: relative;
    width: 100%;
  }

  .nav-bar {
    position: fixed;
    width: 100%;
    top: 0;
    background: #FFFFFF;
    .nav-status {
      width: 100%;
    }

    .nav-head {
      width: 100%;
      color: #000000;
      padding: 0 6px;
      .search-box {
        width: 215px;
        border-radius: 15px;
        background-color: #FBFBFB;
        position: relative;
        img {
          margin-right: 8px;
        }
        span {
          color: #939393;
        }
      }

      .back-box {
        width: 30px;
        height: 30px;
        position: relative;
        z-index: 100;
        img {
          width: 20px;
          height: 20px;
        }
      }

      .title-txt {
        width: 100%;
        font-size: 16px;
        text-align: center;
        margin-left: -18px;
      }
    }
  }
</style>
